<script setup>
import {reactive, ref} from 'vue'
import {
  ChatLineSquare,
  DocumentCopy,
  Grid,
  HomeFilled,
  Notebook,
  Notification,
  Reading,
  User
} from '@element-plus/icons-vue'
import router from '@/router/index.js'
import TabsView from '@/components/TabsView.vue'
import {ElMessage} from "element-plus";

const isCollapse = ref(false)
const asideWidth = ref('220px')
const title = ref('Nova Admin')

const data = reactive({
  user: {}
})

const userData = localStorage.getItem('user');
const parsedUser = (typeof userData === 'string') ? JSON.parse(userData) : userData || {};

data.user = parsedUser;

const handleCollapse = () => {
  isCollapse.value = !isCollapse.value
  asideWidth.value = isCollapse.value ? '64px' : '220px'
  title.value = isCollapse.value ? '' : 'Nova Admin'
}

const handleLogout = () => {
  localStorage.clear()
  ElMessage.success("退出成功，欢迎下次使用")
  router.push('/login')
}

const updateUserProfile = (params) => {
  if (!params) return;
  data.user = JSON.parse(localStorage.getItem('user') || {})
}

const updateUser = (params) => {
  if (!params) return;
  data.user = params
  localStorage.setItem('user', JSON.stringify(params))

}
</script>

<template>
  <div class="container">
    <!-- 侧边栏 -->
    <div class="aside" :style="{ width: asideWidth }">
      <div class="logo" @click="router.push('/home')">
        <img src="../assets/logo.jpg" alt="Logo"/>
        <span v-show="!isCollapse">{{ title }}</span>
      </div>

      <el-menu
          router
          :default-active="router.currentRoute.value.path"
          :collapse="isCollapse"
          :collapse-transition="false"
      >
        <el-menu-item index="/home">
          <el-icon>
            <HomeFilled/>
          </el-icon>
          <template #title>首页</template>
        </el-menu-item>
        <el-sub-menu index="#info">
          <template #title>
            <el-icon>
              <Grid/>
            </el-icon>
            <span>信息管理</span>
          </template>
          <el-menu-item index="/info/user">
            <el-icon>
              <User/>
            </el-icon>
            <template #title>用户管理</template>
          </el-menu-item>
          <el-menu-item index="/info/announcement">
            <el-icon>
              <ChatLineSquare/>
            </el-icon>
            <template #title>公告管理</template>
          </el-menu-item>
          <el-menu-item index="/info/category">
            <el-icon>
              <Notification/>
            </el-icon>
            <template #title>文章分类</template>
          </el-menu-item>
          <el-menu-item index="/info/article">
            <el-icon>
              <DocumentCopy/>
            </el-icon>
            <template #title>文章管理</template>
          </el-menu-item>
          <el-menu-item index="/info/book">
            <el-icon>
              <Notebook/>
            </el-icon>
            <template #title>图书管理</template>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/audit">
          <template #title>
            <el-icon>
              <Reading/>
            </el-icon>
            <span>{{ data.user.userType === '0' ? '文章审核' : '审核信息'}}</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/log">
          <template #title>
            <el-icon>
              <Reading/>
            </el-icon>
            <span>系统日志</span>
          </template>
        </el-menu-item>
      </el-menu>
    </div>

    <!-- 主区域 -->
    <div class="right-panel">
      <!-- 头部 -->
      <div class="header">
        <div class="info">
          <div>
            <el-icon class="icon" @click="handleCollapse">
              <component :is="isCollapse ? 'Expand' : 'Fold'"/>
            </el-icon>
          </div>
          <div style="display: flex; align-items: center">
            <img v-if="data.user?.avatar" :src="data.user?.avatar" alt="图像无法加载"
                 style="width: 40px; height: 40px; border-radius: 50%; margin-right: 10px">
            <img v-else src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                 style="width: 40px; height: 40px; margin-right: 10px" alt="图像无法加载"/>
            <el-dropdown placement="bottom" border="none">
              <span class="title">{{ data.user?.name }}</span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="router.push('/profile')">个人信息</el-dropdown-item>
                  <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>

      <!-- 标签页 -->
      <div class="tabs">
        <TabsView/>
      </div>

      <!-- 主体内容区 -->
      <div class="main">
        <router-view @updateUser="updateUser" @updateUserProfile="updateUserProfile" v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" v-if="$route.meta.keepAlive" :key="$route.fullPath"/>
          </keep-alive>
          <component :is="Component" v-if="!$route.meta.keepAlive" :key="$route.fullPath"/>
        </router-view>
      </div>

      <!-- 底部 -->
      <div class="footer">Copyright © 2025 Nova Admin</div>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.el-tooltip__trigger:focus-visible {
  outline: unset;
}

.title {
  font-size: 16px;
  color: #666;
  cursor: pointer;
  margin-right: 20px;
}

.container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.aside {
  width: 220px;
  background-color: #F5F7FA;
  border-right: 1px solid #E4E7ED;
  flex-shrink: 0;

  .logo {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    background-color: #FFF;
    border-bottom: 1px solid #E4E7ED;
    cursor: pointer;

    img {
      width: 40px;
      margin: 0 10px;
    }

    span {
      margin-right: 45px;
    }
  }

  .el-menu {
    height: calc(100% - 60px);
    flex: 1;
    overflow-y: auto;
    border-right: none;

    .el-menu-item.is-active {
      background-color: #409EFC;
      color: #FFFFFF;
    }
  }
}

.right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.header {
  height: 59px;
  background-color: #FFFFFF;
  box-sizing: border-box;

  .info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 20px;

    .icon {
      cursor: pointer;
      font-size: 20px;
    }

    .icon:hover {
      color: #7C7C7C;
    }
  }
}


.tabs {
  height: 40px;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 20px;
  color: #666;
  font-size: 14px;
  border-top: 1px solid #e4e7ed;
}

.main {
  flex: 1;
  overflow: auto;
  padding: 20px;
  background-color: #F9FAFB;
}

.footer {
  height: 40px;
  background-color: #FFFFFF;
  border-top: 1px solid #E4E7ED;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7C7C7C;
}
</style>